<template>
  <div
    class="wrapper"
    @mouseenter="appStore.showAirBubble"
    @mouseleave="appStore.hideAirBubble"
  >
    <span @click="appStore.showProfile">个人信息</span>
    <span @click="logout">退出登录</span>
  </div>
</template>

<script setup>
  import { localCache } from '@/utils/cache'
  import Message from 'vue-m-message'
  import useUserStore from '@/store/userStore'
  import useAppStore from '@/store/appStore'
  const userStore = useUserStore()
  const appStore = useAppStore()

  const logout = () => {
    localCache.deleteCache('user')
    localCache.deleteCache('avatar')
    localCache.deleteCache('nickname')
    userStore.logout()
    appStore.hideAirBubble()
    Message.success('退出登录~')
  }
</script>

<style scoped lang="less">
  .wrapper {
    position: absolute;
    right: 4%;
    top: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 110px;
    height: 100px;
    margin: 20px auto;
    z-index: 999;
    border: 2px solid var(--background-primary);
    background-color: var(--background-primary);
    border-radius: 15px;
    &::before {
      content: '';
      width: 0;
      height: 0;
      border: 20px solid transparent;
      border-bottom-color: var(--background-primary);
      position: absolute;
      top: 4px;
      right: 20%;
      margin-top: -40px;
    }
    &::after {
      content: '';
      width: 0;
      height: 0;
      border: 18px solid transparent;
      border-bottom-color: var(--background-primary);
      position: absolute;
      top: 0;
      right: 21%;
      margin-top: -36px;
    }
    span {
      width: 100%;
      padding: 8px 0;
      text-align: center;
      font-size: 16px;
      color: var(--text-title-h2);
      cursor: pointer;
      &:hover {
        background-color: rgba(0, 0, 0, 0.4);
      }
    }
  }
</style>
